<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate ></v-progress-linear>
        <v-app-bar app elevation="0" dense color="white">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1">{{appTitle}}</v-toolbar-title>

            <v-btn plain text :ripple="false">

            </v-btn>
        </v-app-bar>

        <v-container>
            <v-card elevation="0" class="mb-2 pa-4 text--primary" v-for="item of items" :key="item.id" :to="`/user/loan/${item.id}`">
                <v-row dense class="align-center" no-gutters>
                    <v-col cols="12" class="d-inline-flex align-center">
                        <span class="font-weight-bold subtitle-1">{{item.name}}</span>
                        <span class="ml-2 primary--text text-caption">{{item.category_type}}</span>
                        <v-spacer></v-spacer>
                        <v-btn text small color="primary" v-if="item.status_name && item.status_name.length > 0">
                            {{item.status_name}}
                        </v-btn>
                    </v-col>
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">征信情况3: </span> <span class="font-weight-regular">一般</span>-->
<!--                    </v-col>-->
                     <v-col cols="12">
                        <span>{{item.apply_at ? item.apply_at.substring(0, 10).replaceAll("-", "/") : ''}}</span>
                    </v-col>
                    <v-col cols="12">
                        <span class="text--secondary">贷款金额: </span>
                        <span class="primary--text font-weight-bold subtitle-2" v-if="item.amount_start == item.amount_end">{{item.amount_start_zh}}</span>
                        <span class="primary--text font-weight-bold subtitle-2" v-else>{{item.amount_start_zh}}-{{item.amount_end_zh}}</span>
                        元
                    </v-col>
                    <v-col cols="12">
                        <span class="text--secondary">抢单需要: </span>
                        <span class="primary--text font-weight-bold subtitle-2">{{item.need_ticket}}</span>
                        金币
                    </v-col>
                    <v-col cols="6" class="d-flex align-center">
                        <v-icon small>mdi-map-marker</v-icon> {{item.province}} {{item.city}}
                    </v-col>
                    <v-col cols="6" class="text-right">
                        <v-btn depressed small outlined rounded color="primary">立即联系</v-btn>
                    </v-col>
                    <v-col cols="12">
                         <v-chip class="mr-1" label  small  outlined color="primary" v-for="tag of item.tags" :key="tag.id" >
                            {{tag.title}}
                        </v-chip>
                    </v-col>
                </v-row>
            </v-card>

             <v-row dense v-if="items.length > 0">
                <v-col cols="12"  v-intersect="loadMore" v-if="!finished">
                    <v-btn :ripple="false" plain text block @click="loadMore" :loading="loading">加载更多</v-btn>
                </v-col>
                <v-col cols="12" v-else>
                    <v-btn disabled plain text block>没有更多数据了...</v-btn>
                </v-col>
            </v-row>
            <v-row dense v-else-if="!loading">
                <v-col cols="12">
                    <v-btn disabled plain text block>暂无数据...</v-btn>
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from 'vuex';

export default {
    data: () => ({
        loading: false,
        items: [],
        pageNo: 1,
        pageSize: 10,
        finished: false
    }),
    computed: {
        appTitle() {
            return "我的客户";
        },
        ...mapGetters([
            'uid'
        ]),
    },
    created() {
        this.load();
    },
    methods: {
        load() {
            const that = this;
            that.loading = true;
            axios.get(`/v1/user/loan`,{ params: {
                        pageSize: this.pageSize,
                        page: this.pageNo }
            }).then((response) => {
                if (response.data.code == 0) {
                    that.items = that.items.concat(response.data.data.items);
                    if (response.data.data.items.length < that.pageSize) {
                        that.finished = true;
                    }
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
            .catch(function () {})
            .then(function () {
                 that.loading = false;
            });
        },
        loadMore() {
            this.pageNo++;
            this.load();
        },
    }
};
</script>

<style lang="scss">

</style>
